<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.icon{
				background-image: url("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png");
				width: 25px;
				height: 25px;
				background-repeat: no-repeat;
				background-position: 0px -100px;
			}
			.qzone{
				background-position: 0 -96px;
			}
			.qzone-active{
				background-position: 0 -146px;
			}
			.qzone:hover{
				background-position: 0 -146px;
			    /* transition: all 0.3s; */
			}
			.email{
				background-position: 2px -196px;
			}
			.email:hover{
				background-position: 2px -246px;
			}
			.jiantou{
				background-image: url("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/icons.png");
				width: 25px;
				height: 25px;
				background-position: -10px -760px;
			}
			.jiantou:hover{
				background-position: -10px -809px;
			}
		</style>
	</head>
	<body>
		<div class="icon qzone"></div>
		<div class="icon email"></div>
		<div class="jiantou"></div>
	</body>
</html>
